<template>
	<view class="bg_box">
		<view class="modal_box" v-if="showStatus && showModalType<=4" @touchmove.stop.prevent="moveHandle">
			<view class="help" v-if="showModalType==1">
				<img :src="topImages" />
				<view class="help_content">
					<img :src="pageData.image || icons">
					<view v-if="showModalType==1" class="text">
						<span class="msg">好友助力成功</span>
						<view class="get">获得<span>1</span>次刮奖机会</view>
						<button type="default" @click="handlerButton(0)">去刮奖</button>
					</view>
				</view>
			</view>
			<view class="help" v-if="showModalType==2">
				<img v-show="checkHost(pageData.win_popup)" :src="pageData.win_popup || ''" />
				<view class="help_content">
					<img :src="formatImage(pageData)">
					<view class="text">
						<span class="get">{{pageData.title}}</span>
						<button type="default" @click="handlerButton(1)">再玩一次</button>
						<span class="btn_msg">所中奖品可在“我的奖品”中查看</span>
					</view>
				</view>
			</view>
			<view class="fail" v-if="showModalType==3">
				<img src="@/static/guess/pop_fail.png" />
				<span>很遗憾，您未中奖</span>
				<button type="default" @click="handlerButton(1)">再玩一次</button>
			</view>
			<view class="qrcode" v-if="showModalType==4">
				<img :src="serviceInfo.service_qrcode"/>
				<span class="msg">{{isAPP?serviceInfo.guide_in_app:serviceInfo.guide_out_app}}</span>
			</view>
			<img v-if="showModalType!=2 && showModalType!=3" src="@/static/guess/close.png" @click="handlerClose">
		</view>
		<view class="modal_box" v-if="showStatus && (showModalType==5 || showModalType==6)"   @touchmove.stop.prevent="moveHandle">
			<view class="connect_wechat" v-if="showModalType==5">
				<!-- <span>请先绑定微信</span>
				<view class="btn">
					<span @click="handlerClose">暂不绑定</span>
					<span @click="connectWechat">立即绑定</span>
				</view> -->
				<span>请先绑定微信</span>
				<view class="icon">
					<img src="@/static/guess/wechat.png"/>
				</view>
				<view class="btn_wechat">
					<span @click="handlerClose">暂不绑定</span>
					<span @click="connectWechat">立即绑定</span>
				</view>
			</view>
			<view class="service" v-if="showModalType==6">
				<view class="header_image">
					<span>联系客服</span>
					<img :src="qiniuUrl+'service.png'"/>
				</view>
				<view class="connect_void">
					<span>联系电话</span>
					<span @click="call(serviceInfo.service_phone)">{{serviceInfo.service_phone}}</span>
					<view @click="call(serviceInfo.service_phone)">
						<img src="@/static/guess/call.png"/>
					</view>
				</view>
				<span class="online_connect" @click="openQrcode">{{msgText}}</span>
			</view>
			<img v-if="showModalType==6" src="@/static/guess/close.png" @click="handlerClose">
		</view>
		<view class="modal_box" v-if="showModalType==7">
			<view class="yd">
				<span class="title">提示</span>
				<img :src="siteinfo.app_logo" ></img>
<!--				<span>当前活动仅在{{data.msg}}平台进行，请前往参与！</span>-->
        <span>请前往APP平台参与活动</span>
				<view class="btn">
					<span @click="handlerOpen">下载/打开{{siteinfo.app_name}}</span>
				</view>
			</view>
			<img src="@/static/guess/close.png" @click="handlerClose">
		</view>
		<view class="modal_box" v-if="showModalType==8">
			<view class="yd2">
				<span>即将打开{{siteinfo.app_name}}APP，兑换商品！</span>
				<view class="icon">
					<img src="@/static/guess/prize_out.png" />
				</view>
				<view class="btn_wechat">
					<span class="" @click="handlerClose">取消</span>
					<span @click="handlerOpen">立即兑换</span>
				</view>
			</view>
		</view>
		<view class="modal_box" v-if="showModalType==9">
			<view class="qrcode">
				<img :src="data.qrcode"/>
				<span class="msg">{{data.msg}}</span>
			</view>
			<img  src="@/static/guess/close.png" @click="handlerClose">
		</view>
		<view class="msg_box" v-if="showModalType==10">
			<view class="qrcode">
				今日次数已用完
				<img  src="@/static/guess/close.png" @click="handlerClose">
			</view>
			
		</view>
		<view class="modal_box" v-if="showModalType==11">
			<view class="connect_wechat">
				<span>请先绑定手机号</span>
				<view class="icon_phone">
					<img  src="@/static/guess/iphone.png"/>
				</view>
				<view class="btn_wechat">
					<span @click="handlerClose">暂不绑定</span>
					<span @click="connectPhone">立即绑定</span>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {isQianfan,isWeiXin,newJumpUrl,loadJs,checkImage} from '@/until/QFH5.js'
	import {mapGetters} from 'vuex'
	import {checkHostOrImage} from '@/until/tool'
	export default{
		props:{
			//1-task 2-中奖 3-没有中奖 4-客服二维码 5-绑定微信 6app客服沟通 7引导样式 9Task展示性二维码 10次数用完 11绑定手机号
			showType:{
				type:Number,
				default:1
			},
			data:{
				// type:Object ,
				default:()=>{return {}}
			}
		},
		computed:{
			...mapGetters({qiniuUrl:'qiniuUrl',siteinfo:'siteinfo',serviceInfo:'serviceInfo'}),
			icons(){
				return require('@/static/guess/one_time.png')
			},
			win_icons(){
				switch(this.pageData.type){
					case 1: return this.qiniuUrl+'prize.png'
					case 2: return this.qiniuUrl+'bag.png'
					case 3: return this.qiniuUrl+'prize_mt.png'
				}
			},
			isAPP(){
				return isQianfan()
			}
		},
		data(){
			return{
				showStatus:true,
				pageData:{},
				qrcode:"",
				showModalType:-1,//显示类型
				msgText:'在线沟通'
			}
		},
		methods:{
			checkHost(url){
				return checkHostOrImage(url)
			},
			connectWechat(){
				let _this = this
				QFH5.jumpBindThirdPlatform(3,function(){
					_this.handlerClose()
					location.reload()
				})
			},
			connectPhone(){
				let _this = this
				QFH5.jumpBindMobile(function(){
					_this.handlerClose()
					location.reload()
				})
			},
			formatImage(data){
				return checkImage(data.type,data.image)
			},
			// 0完成任务 1 助力
			handlerButton(val){
				this.showStatus=false
				this.$emit('back',val)
			},
			handlerClose(){
				this.showStatus=false
				this.$emit('close')
			},
		    async handlerOpen(){
				let loactionUrl = window.location.href
				let actid = uni.getStorageSync('actid')|| null
				// if(loactionUrl.indexOf('&id=')==-1)//兼容其他页面打开app
				// 	loactionUrl = loactionUrl +"&id=" + actid
				if(loactionUrl.indexOf('id=')==-1){//兼容其他页面打开app
 					if( loactionUrl.indexOf('?')==-1){
                        loactionUrl =loactionUrl+"?id=" + actid
                    }else{
                        loactionUrl =loactionUrl+"&id=" + actid
                    }
                }
				let param = encodeURIComponent(loactionUrl)
				let url = newJumpUrl(0,param) //web
				window.location.href = url
			},
			call(num){
				window.location.href = 'tel:'+num
			},
			setLink(val){
				this.qrcode = val
			},
			openQrcode(){
				if(this.msgText=="在线沟通"){
					this.showModalType=4
				}else{
					window.location.href = 'tel:'+this.serviceInfo.service_phone
				}
			}
		},
		created() {
			this.showModalType = this.showType
			
			if(this.showType==4){
				if(this.serviceInfo.service_qrcode==""){
						this.msgText = "立即沟通"
				}
			}
		},
		watch:{
			data:{
				handler(newVal,oldVal){
					this.pageData = newVal
				},
				deep:true,
				immediate:true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg_box{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,.7);
	}
	.modal_box{
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%,-40%);
		width: 750rpx;
		.help{
			animation: open 0.3s linear;
			@keyframes open {
				0%{opacity: 0;}
				99%{opacity: 0.99;}
				100%{opacity: 1;}
			}
			&>img{
				width: 640rpx;
				height: 264rpx;
				// margin-top: 20%;
				margin-left: 55rpx;
			}
			.help_content{
				width: 480rpx;
				height: 430rpx;
				background: #FFFFFF;
				box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.2);
				border-radius: 30px 30px 30px 30px;
				margin: -12rpx 55rpx 0;
				padding: 69rpx 80rpx 68rpx;
				text-align: center;
				img{
					width: 200rpx;
					height: 200rpx;
					margin-top: 0;
				}
				.msg{
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
				.btn_msg{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-top: 20rpx;
					display: block;
				}
				.get{
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #222222;
					margin-top: 18rpx;
					letter-spacing: 1rpx;
					span{
						color: #FF1E3D;
					}
				}
				.text{
					color: #000;
					button{
						width: 480rpx;
						height: 90rpx;
						background: #FF3255;
						border-radius: 43rpx;
						font-size: 36rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						letter-spacing: 4rpx;
						margin-top: 30rpx;
					}
				}
			}
		}
		&>img{
			margin: 89rpx 340rpx 0 340rpx;
			width: 70rpx;
			height: 70rpx;
		}
		.fail{
			width: 503rpx;
			height: 430rpx;
			background: #FFFFFF;
			box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.2);
			border-radius: 30px 30px 30px 30px;
			margin: 0 auto;
			padding: 69rpx 80rpx 68rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			img{
				width: 200rpx;
				height: 200rpx;
				margin-top: 0;
			}
			&>span{
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
				margin-top: 13rpx;
				letter-spacing: 1rpx;
				span{
					color: #FF1E3D;
				}
			}
			button{
				width: 480rpx;
				height: 90rpx;
				background: #FF3255;
				border-radius: 43rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				letter-spacing: 4rpx;
				margin-top: 30rpx;
			}
		}
		.qrcode{
			width: 520rpx;
			height: 520rpx;
			border-radius: 30rpx;
			margin: 0 auto 11rpx;
			background: #FFFFFF;
			text-align: center;
			img{
				width: 400rpx;
				height: 400rpx;
				margin-top: 20rpx;
				background-color: rgba(0, 0, 0, 0.2);
			}
			.msg{
				display: block;
				font-size: 30rpx;
				line-height: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-top: 20rpx;
			}
		}
	}
	.connect_wechat{
		position: relative;
		width: 640rpx;
		height: 590rpx;
		box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.2);
		background-color: #fff;
		border-radius: 30rpx;
		margin:0 auto;
		// padding: 40rpx 0 ;
		text-align: center;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		// align-items: center;
		span{
			margin-top: 90rpx;
			display: block;
			font-size: 36rpx;
			line-height: 36rpx;
			font-weight: 400;
			font-family: PingFang SC-Regular, PingFang SC;
		}
		.icon{
			margin: 61rpx auto 0;
			line-height: 0;
			img{
				width: 144rpx;
				height: 117rpx;
				margin: 0 auto;
			}
		}
		.icon_phone{
			margin: 40rpx auto -7rpx;
			line-height: 0;
			img{
				width: 97rpx;
				height: 144rpx;
			}
		}
		.btn_wechat{
			margin-top: 78rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			width: 750rpx;
			height: 90rpx;
			span{
				display: block;
				width: 280rpx;
				height: 90rpx;
				border-radius: 43rpx;
				line-height: 90rpx;
				font-size: 36rpx;
				margin-top: 0;
				&:first-child{
					width: 278rpx;
					height: 88rpx;
					color: #FF3255;
					margin-left: 25rpx;
					border: 1px solid #FF3255;
				}
				&:last-child{
					background-color: #FF3255;
					margin-left: 30rpx;
					color: #fff;
				}
				&:active{
					opacity: 0.9;
				}
			}
		}
	}
	.service{
		width: 640rpx;
		height: 701rpx;
		position: relative;
		margin: 0 auto;
		background: #F5F5F5;
		border-radius: 30rpx;
		.header_image{
			line-height: 0;
			span{
				display: block;
				position: absolute;
				left: 0;
				top: 39rpx;
				width: 640rpx;
				text-align: center;
				line-height: 50rpx;
				
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			img{
				width: 640rpx;
				height: 449rpx;
			}
		}
		.connect_void{
			margin-top: 40rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 40rpx;
			span{
				display: block;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40px;
				&:first-child{
					margin-left: 40rpx;
				}
				&:nth-child(2){
					margin-left: 20rpx;
					min-width: 280rpx;
				}
			}
			view{
				line-height: 0;
				margin-left: 103rpx;
				img{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.online_connect{
			margin: 43rpx 0 0 140rpx;
			display: block;
			width: 360rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #FF3255;
			border-radius: 40rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.yd{
		width: 600rpx;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 40rpx 10rpx 50rpx;
		margin: 0 auto;
		text-align: center;
		overflow: hidden;
		&>span{
			padding: 20rpx 30rpx 0;
			display: block;
			text-align: center;
			width: 540rpx;
			min-height: 80rpx;
			font-size: 28rpx;
			line-height: 44rpx;
			font-weight: 400;
			font-family: PingFang SC-Regular, PingFang SC;
			&[class=title]{
				font-size: 36rpx;
				font-weight: 400;
			}
		}
		.btn{
			margin-top: 10rpx;
			span{
				margin: 0 auto;
				padding:14rpx 50rpx ;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 30rpx;
				background-color: #FF3255;
				color: #fff;
				border-radius: 8rpx;
				&:active{
					opacity: 0.9;
				}
			}
		}
		&>img{
			width: 150rpx;
			height: 150rpx;
		}
	}
	.yd2{
		position: absolute;
		left: 50%;
		top: 50%;
		width: 640rpx;
		height: 590rpx;
		background-color: #fff;
		border-radius: 24rpx;
		transform: translate(-50%,-50%);
		// padding: 40rpx 0 0;
		text-align: center;
		overflow: hidden;
		&>span{
			// padding: 20rpx 30rpx 0;
			display: block;
			text-align: center;
			margin-top: 90rpx;
			line-height: 36rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
		}
		.icon{
			margin:  42rpx 0  71rpx;
			line-height: 0;
			img{
				width: 214rpx;
				height: 142rpx;
			}
		}
		.btn_wechat{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			width: 750rpx;
			height: 90rpx;
			span{
				display: block;
				width: 280rpx;
				height: 90rpx;
				border-radius: 43rpx;
				line-height: 90rpx;
				font-size: 36rpx;
				margin-top: 0;
				&:first-child{
					width: 278rpx;
					height: 88rpx;
					color: #FF3255;
					margin-left: 25rpx;
					border: 1px solid #FF3255;
				}
				&:last-child{
					background-color: #FF3255;
					margin-left: 30rpx;
					color: #fff;
				}
				&:active{
					opacity: 0.9;
				}
			}
		}
	}
	.msg_box{
		// position: fixed;
		// left: 0;
		// top: 0;
		// z-index: 11;
		// width: 100%;
		// height: 100vh;
		// background-color: rgba(0,0,0,.7);
		&>view{
			// margin: 460rpx auto 0;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			width: 400rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			padding: 50rpx 100rpx;
			background-color: #fff;
			border-radius: 24rpx;
			font-size: 34rpx;
			font-weight: 400;
			font-family: PingFang SC-Regular, PingFang SC;
			&>img{
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: -60rpx;
				right: 0rpx;
			}
		}
		
	}
</style>
